// 创建类组件模板代码
import React, { useEffect } from "react";
import Top from "./components/top"
import "./index.css"
import Alert from "../../components/Alert"
import { withRouter } from "react-router-dom";
import {connect} from 'react-redux'
import {searchStoreApi } from "../../api/city"
const Hotpoint= (props) => {
    const myref=React.useRef('')
    const [store,setStore] = React.useState([])
    const [city,setCity]  = React.useState('北京')
    const storeList=async (myref)=>{
        let storelist=await searchStoreApi({city:city,storename:myref})
        setStore(storelist)
        setCity(props.location.state.city)
    }
    useEffect(() => {
        storeList()
    }, [city])
    return (
        <div className="boxx">
            <Alert>
                <Top title='更多门店'></Top>
                <div className="nav">
                    <div className="shi">
                        <span onClick={() => { props.history.push({ pathname: "/City"})}}style={{marginLeft: '10rem'}}>{city}</span>
                        <span className="iconfont" style={{fontSize:"10rem",color:'gray'}}>&#xe610;</span>
                    </div>
                    <div className="search">
                        <span className="iconfont">&#xe622;</span>
                        <input type='text' placeholder="请输入门店搜索" onChange={()=>{storeList(myref.current.value)}} ref={(ref)=>{myref.current=ref}} />
                    </div>
                </div>
                <div className="didi">
                    {
                        store.map((item,index) =>{return(
                            <div className="bai" key={item.id}>
                                <div className="lef">
                                    <div className="km">
                                        <h4>{item.store}</h4>
                                    </div>
                                    <span className="iconfont">&#xe8c4;</span>
                                    <span>{item.address}</span>
                                </div>
                                <div className="righ">
                                    <div className="icon">
                                        <div>
                                            <span className="iconfont">&#xe8bc;</span>
                                            <p>联系门店</p>
                                        </div>
                                        <div className="r">
                                            <span className="iconfont">&#xe60a;</span>
                                            <p>{item.distance}</p>
                                        </div>
                                    </div>
                                    <button onClick={() => { props.history.push({ pathname: "/Food", state: { title: item.store } }) }}>预点单</button>
                                </div>
                            </div>
                        )})
                    }
                    <div className="more">
                        <span>没有更多了</span>
                    </div>
                </div>
            </Alert>
        </div>
    )
}
export default withRouter(connect((state)=>{return{nowUser:state.user}},(dispatch)=>{return{}})(Hotpoint))